<template>
	<view v-show="loading">
		<uni-notice-bar showClose showIcon scrollable :speed="20" :text="notice"></uni-notice-bar>
		<view class="margin-sm">
			<text >请选择提现方式</text>
		</view>
		<view class="cu-list menu solid-bottom">
			<view class="cu-item arrow" @tap="showModal" data-target="bottomModal">
				<view class="content" style="font-size: 16px;">
					<view class="alls">
						<image :src="'../../static/'+type+'.png'" mode="aspectFit"></image>
					</view>
					<text class="">{{payname}}</text>
				</view>
			</view>
		</view>
		<view class="margin-sm margin-top-lg">
			<text >请选择提现账号</text>
		</view>
		<view class="cu-list menu solid-bottom  padding" :class="bankname!=null?'bg-blue':'bg-white'">
			<view class="flex align-center bg-blue" @tap="showModal" data-target="setaccount" v-if="bankname!=null">
				<view class="paycss">
					<image :src="'../../static/'+type+'.png'"  mode="aspectFill"></image>
				</view>
				<view class="flex-sub text-left">
					<view class="text-bold ">
						<text>{{bankname}}</text>
					</view>
					<view class="text-sm">{{bankacount}}</view>
				</view>
				<view class="action">
					<text class="cuIcon cuIcon-right text-white"></text>
				</view>
			</view>
			<view class="align-center" @tap="addbank" v-else>
					<text class="cuIcon cuIcon-add"></text>
					<text class="margin-left-sm">添加{{payname}}账号</text>
			</view>
		</view>
		<view class="cash padding-xs margin-top bg-white">
			<view class="margin-sm text-green">
				可提现金额<text class="text-price margin-left-xs">{{money}}</text>
			</view>
			<view class="mqu">
				<view class="cu-form-group" style="align-items: flex-end;min-height:40px" >
					<view class="title text-orange" style="line-height: 40px;">￥</view>
					<input placeholder="输入提现金额"  v-model="txmoney" type="number" @input="focuss"></input>
					<button class='cu-btn bg-green shadow' @tap="alltx">全部提现</button>
				</view>
			</view>
		</view>
		<view class="padding cash margin-top bg-white">
			<view class="margin-xs">
				<text>单笔提现最低{{tips.minmoney}} 单笔最高{{tips.maxmoney}}</text>
			</view>
			<view class="margin-xs">
				<text v-if="parseFloat(tips.feilv)>1">单笔手续费{{tips.feilv}}元</text>
				<text v-else-if="parseFloat(tips.feilv)<1 && parseFloat(tips.feilv)>0 ">单笔手续费{{tips.feilv*100}}%</text>
			</view>
		</view>
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-red margin-tb-sm lg" @tap="cash">立即提现</button>
		</view>
		<view class="cu-modal bottom-modal" @tap="hideModal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-list menu ">
					<view class="cu-item solid-bottom" @tap="selectPay" :data-target="ite.type" :data-id="inde" v-for="(ite,inde) in navs">
						<view class="content text-left" style="font-size: 16px;">
							<view class="alls">
								<image :src="'../../static/'+ite.type+'.png'" mode="aspectFit"></image>
							</view>
							<text class="">{{ite.name}}</text>
							<view class="actiont" v-show="type==ite.type">
								<text class="cuIcon cuIcon-check text-green"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal bottom-modal" @tap="hideModal" :class="modalName=='setaccount'?'show':''">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-gray">
					<view class="action text-green" @tap="gobank">管理</view>
					<view class="action text-bold text-lg">选择提现账户</view>
					<view class="action text-blue" @tap="hideModal">取消</view>
				</view>
				<view class="cu-list menu ">
					<view class="solid-bottom padding-sm flex align-center" v-for="(item,index) in banksl" @tap="setpay" :data-keys="index">
						<view class="paycss">
							<image :src="'../../static/'+type+'.png'"  mode="aspectFill"></image>
						</view>
						<view class="flex-sub text-left">
							<view class="text-bold ">
								<text>{{item.accounts}}</text>
							</view>
							<view class="text-grey text-sm">{{item.bankname}}</view>
						</view>
						<view class="actiont" v-show="item.id==banksid">
							<text class="cuIcon cuIcon-check text-green"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
    <v-popup @update:isShow="isShow = $event" :isShow="isShow"></v-popup>
    <!-- #ifdef MP-WEIXIN -->
    <v-kefu @tap="tokefu()"></v-kefu>
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN -->
    <view @click="tokefu()" class="">
      <v-kefu></v-kefu>
    </view>
    <!-- #endif -->
	</view>
</template>
<script>
	import kefu from '@/components/kefu.vue';
  import popup from '@/components/popup.vue';
	export default {
		components: {
		'v-kefu':kefu,
    'v-popup': popup
		},
		data() {
			return {
				notice:"这是公告",
				modalName:null,
				navs:[],
				txmoney:0,
				// type:'alipay',
        type:'bank',
				payname:"",
				money:0,
				tips:[],
				loading:true,
				banksl:[],
				banksid:0,
				bankname:null,
				bankacount:null,
				banklist:[],
        isShow: 0, //控制客服弹出层
			}
		},
		onLoad() {
			uni.showLoading({
				title:'加载中...'
			})
			this.getData()
      
		},
		methods: {
      tokefu() {
        this.isShow = !this.isShow;
      },
      // 
			focuss(e){
				let a=e.detail.value
				console.log(a,this.money)
				if(parseFloat(a)>parseFloat(this.money)){
					console.log(">>>")
					setTimeout(() => {
						this.txmoney=this.money;
					}, 0);
				}else{
					console.log('吾问无为谓');
					//this.txmoney=0.00;
				}
			},
			alltx(){
				if(parseFloat(this.money)<=0){
					this.app.showMsg('可提现金额不足');
					
				}else{
					this.txmoney=this.money
				}
			},
			addbank(){
				uni.navigateTo({
					url:'userbank?type='+this.type
				})
			},
			setpay(e){
				let is=e.currentTarget.dataset.keys
				console.log(this.banksl,is)
				this.banksid=this.banksl[is].id
				this.bankname=this.banksl[is].bankname
				this.bankacount=this.banksl[is].accounts
				this.modalName = null
			},
			cash(){
                var that=this;
				console.log(this.txmoney,"??")
				if(this.txmoney<=0){
					this.app.showMsg('提现金额不能小于等于0');
					return;
				}
				if(this.txmoney < this.tips.minmoney){
					this.app.showMsg('单笔提现金额最少'+this.tips.minmoney);
					return;
				}
				if(this.txmoney > parseFloat(this.tips.maxmoney)){
					this.app.showMsg('单笔提现金额最高'+this.tips.maxmoney);
					return;
				}
				if(this.banksid==0){
					this.app.showMsg('请选择提现账号');
					return;
				}
				uni.showLoading({
					mask:true
				})
				uni.request({
					url: that.app.apiHost+"/withdraw",
					method:'POST',
					header:{'Authorization':'bearer '+that.app.getAuthCode()},
					data:{type:that.type,moneyoff:that.txmoney,bank_id:this.banksid},
					success:(res)=>{
						if(res.data.code == 40000){
							return that.app.showMsg('请先进行实名认证!','/pages/userinfo/authentication');
						}
                        if(res.data.code == 40001){
                        	that.app.showMsg('请完成认证操作');
                        	 uni.request({
                        	     url: that.app.apiHost + '/faceAuth',
                        	     method: 'POST',
                        	     header: { Authorization: 'bearer ' + that.app.getAuthCode() },
                        	     data:{
                        	         authType:2
                        	     },
                        	     success: (res) => {
                        	         uni.hideLoading();
                        	         this.aliPayUrl = res.data.data.H5Url;
                        	         let encodedUrl = encodeURIComponent(this.aliPayUrl);
                        	             uni.navigateTo({
                        	                 url: '/pages/common/webgzh?url=' + encodedUrl
                        	             });
                        	     },
                        	     fail(res) {
                        	         console.log(res);
                        	     }
                        	 });
                        }
						if(res.data.code == 40003){
							return that.app.showMsg('实名认证审核中!');
						}
						if(res.data.code == 40005){
							return that.app.showMsg('请先完成电子签!','/pages/my/sign');
						}
						if(res.data.code == -1){
							that.app.showMsg('请登陆后再操作!','../login/login');
						}
						uni.hideLoading()
						if(res.data.code==0){
							that.app.showMsg(res.data.msg,'../my/cash');
						}else{
							this.app.showMsg(res.data.msg);
						}
					},
					fail(res) {
						console.log(res);
					}
				})
			},
			getData(){
				var that=this;
				uni.request({
					url: that.app.apiHost+"/cashindex",
					method:'POST',
					header:{'Authorization':'bearer '+that.app.getAuthCode()},
					success:(res)=>{
            console.log(res.data);
            // 
            // 
						if(res.data.code == -1){
							that.app.showMsg('请登陆后再操作!','../login/login');
						}
						if(res.data.code==0){
							let da=res.data.data
							that.money=da.usermoney
							that.navs=da.config
							that.type=that.navs[0].type
							that.tips=that.navs[0]
							that.payname=that.navs[0].name
							that.notice=that.navs[0].tips
							that.banksl=da.banklist[that.type]
							that.banklist=da.banklist
							if(that.banksl.length>0){
								that.banksid=that.banksl[0].id
								that.bankname=that.banksl[0].bankname
								that.bankacount=that.banksl[0].accounts
							}
							
							uni.hideLoading()
							that.loading=true
                            console.log(88,this.tips);
						}
					},
					fail(res) {
					}
				})
			},
			selectPay(e){
				this.modalName = null
				this.type=e.currentTarget.dataset.target
				let o= e.currentTarget.dataset.id;
				this.payname=this.navs[o].name
				this.notice=this.navs[o].tips
				this.tips=this.navs[o]
				let that=this
				that.banksl=this.banklist[that.type]
				if(that.banksl.length>0){
					that.banksid=that.banksl[0].id
					that.bankname=that.banksl[0].bankname
					that.bankacount=that.banksl[0].accounts
				}else{
					that.banksid=0
					that.bankname=null
					that.bankacount=null
				}
			},
			gobank(){
				uni.navigateTo({
					url:'./userbank'
				})
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
		}
	}
</script>
<style>
	page{
	  background-color:#f1f1f1;
	}
.alls{
	width: 40rpx;
	height: 40rpx;
	display: inline-block !important;
	margin-right: 10rpx;
}
.alls image{
	width: 100%;
	height: 100%;
	vertical-align:text-bottom;
}
.actiont{
	display: inline-block;
	float:right;
	font-size: 50rpx;
}
.paycss{
	width: 28px; height: 28px; margin-right: 8px;
	border-radius: 50%;
	padding: 3px;
	background-color: #FFF;
}
.paycss image{
	width: 100%;
	height: 100%;
}
.cash{
border: 1px solid #f1f1f1;	
}
.mqu{
}
.sfd{
	display: inline-block;width: 90%;
}
</style>
